<template>
  <div>
    <!--导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right" v-if="!isAdmin">
      <el-breadcrumb-item :to="{ path: '/user/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文件管理</el-breadcrumb-item>
      <el-breadcrumb-item>文件上传</el-breadcrumb-item>
    </el-breadcrumb>

    <el-breadcrumb separator-class="el-icon-arrow-right" v-else>
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文件管理</el-breadcrumb-item>
      <el-breadcrumb-item>文件上传</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
    <div class="upLoadFile">
      <el-upload class="upload-demo" :auto-upload="false" drag ref="upload" :action="doUpload" :on-remove="handleRemove"
                 :on-success="handleSuccess"
                 :on-exceed="handleExceed"
                 :file-list="fileList"
                 :limit="1"
                 :data="fileData"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">每次只上传一个文件(文件大小不能超过30MB)，并填写文件描述</div>
      </el-upload>
    </div>
    <div class="button">
      <el-button style="margin-left: 10px;" size="small" type="success" @click="showDialog">上传到服务器</el-button>
    </div>
    <el-dialog title="上传文件" :visible.sync="dialogNewTreeVisible" width="30%">
      <el-form label-width="80px">
        <el-form-item label="项目组">
          <el-select  v-model="fileData.group"  placeholder="请选择项目组">
            <el-option v-for="item of myGroupList" :key="item.index" :label="item.groupName"  :value="item.groupName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文件类型">
          <el-select  v-model="fileData.fileType"  placeholder="请选择文件描述">
            <el-option v-for="item of fileTypeList" :key="item.index" :label="item.fileType"  :value="item.fileType"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文件描述">
          <el-input v-model="fileData.fileDesc" ></el-input>
        </el-form-item>
        <el-button style="margin-top: 10px" @click="handelDesc" type="success">上传</el-button>
        <el-button @click="dialogNewTreeVisible = false">取消</el-button>
      </el-form>
    </el-dialog>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'UploadFile',
    data() {
      return {
        isAdmin: false,
        fileList: [],
        myGroupList:[],
        fileData:{
          fileDesc:'',
          group:'',
          fileType:'',
          userName:''
        },
        fileTypeList:[{
          fileType:'日常文件'
        },{
          fileType:'项目文件'
        }],
        dialogNewTreeVisible:false,
        doUpload: 'http://127.0.0.1:8090/602system/file/upload'
      };
    },
    methods: {
      //删除上传
      handleRemove(file, fileList) {
      },
      //不能上传超过1个文件
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      //上传前需要写入文件描述和文件类型
      handelDesc(){
        if(this.fileData.fileDesc && this.fileData.group && this.fileData.fileType){
          var userInformation = JSON.parse(window.sessionStorage.getItem("user"));
          this.fileData.userName = userInformation.userName;
          this.$refs.upload.submit()
          this.dialogNewTreeVisible = false
        }else{
          this.$message.error('请检查是否输入完整');
        }
      },
      //上传成功后
      handleSuccess(res,file,fileList){
            if (res.status !== 200){
              return false;
            }
            this.$message.success('上传成功');
            this.fileData.fileDesc = '';
            this.fileData.group = '';
            this.fileData.fileType = '';
            this.dialogNewTreeVisible = false;
      },
      showDialog(){
        this.dialogNewTreeVisible = true;
      },
      //获取我加入的分组
      async getMyGroups(){
        var userInformation = JSON.parse(window.sessionStorage.getItem("user"));
        this.userName = userInformation.userName;
        const {data: res} = await this.$http.get(`group/getMyGroupsAndOtherInfo/${userInformation.userId}`);
        console.log(res);
        if (res.status !== 200){
          return this.$message.error(res.msg);
        }
        this.myGroupList = res.data;
      }

    },
    mounted(){
      var userInfo = JSON.parse(window.sessionStorage.getItem("user"));
      if (userInfo.userAuthority == 2){
        this.isAdmin = true;
      }
      this.getMyGroups();
    },
  }
</script>
<style scoped>
  .upLoadFile{
    width: 50%;
    margin-bottom: 20px;
  }
  .button{
    margin-left: 100px;
  }
  .el-upload__tip{
    font-size: 15px;
    color: crimson;
  }
</style>
